<template>
    <view class="home-page">
        <view>这是主页</view>
        <!-- 获取微信头像和昵称最新方式 -->
        <view class="wx-info">

            <!-- 获取微信头像 -->
            <image class="avatar" :src="avatarUrl"></image>
            <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">获取微信头像</button>

            <!-- 获取微信昵称 -->
            <input class="ipt" type="nickname" placeholder="请输入微信昵称">
        </view>

        <view class="content">
            <view class="home-info" v-for="item in workList" :key="item.work_id">
                <view class="pre-imgs" @tap="cardClick(item)">
                    <image class="img" circle :src="item.face_pic" />
                </view>
                <view class="home-top">
                    <view class="home-top-title" v-text="item.work_name"></view>
                    <view class="home-top-coun">
                        <view class="home-top-num home-top-view">
                            <text class="icon iconfont icon-icon_liulan"></text>
                            <text class="num" v-text="item.view_num"></text>
                        </view>
                        <view class="home-top-num home-top-like">
                            <text class="icon iconfont icon-icon_dianzan"></text>
                            <text class="num" v-text="item.like_num"></text>
                        </view>
                    </view>
                </view>
                <view class="home-bottom">
                    <image circle class="home-bottom-avatar" :src="item.user_info.avatar" />
                    <view class="home-bottom-username overflow" v-text="item.user_info.username"></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { getWorksListApi } from "@api/works"
import { isPhone } from 'js-tools-zk'

export default {
    data() {
        return {
            title: 'Home',
            avatarUrl: '',
            token: uni.getStorageSync("token"),
            workList: []
        }
    },
    onLoad() {
        console.log('是不是手机号：' + isPhone('13600000000'))
    },
    onShow() {
        uni.setNavigationBarTitle({ title: '作品' })

        // this.getWorkList()
    },
    methods: {
        getWorkList() {
            let data = {
                page: 1,
                limit: 99,
                type: 1,
                access_token: this.token
            }
            getWorksListApi(data).then(res => {
                console.log(res)
                let { data } = res
                this.workList = data
            })
        },
        cardClick() {
            console.log('111');
        },
        onChooseAvatar(e) {
            const { avatarUrl } = e.detail
            this.avatarUrl = avatarUrl
        }
    }
}
</script>

<style lang="less">
.home-page {
    background: #f4f6f9;

    .wx-info {
        padding: 20px;

        .avatar {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 0 auto 10px;
        }

        .ipt {
            height: 50px;
            line-height: 50px;
            margin-top: 20px;
            padding: 0 10px;
            color: #000;
            font-size: 16px;
            border-radius: 6px;
            border: 1px solid #e8e8e8;
        }
    }
}

.content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 10px;

    .home-info {
        position: relative;
        flex: 0 0 48%;
        margin-bottom: 10px;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 12px;
        overflow: hidden;

        &:nth-child(2n) {
            margin-left: 10px;
        }

        .pre-imgs {
            .img {
                width: 100%;
                height: 130px;
            }
        }

        .home-top {
            padding: 10px;
            background-color: #fff;

            .home-top-title {
                height: 38px;
                font-weight: 500;
                font-size: 14px;
                overflow: hidden;
            }

            .home-top-coun {
                display: flex;
                align-items: center;
                margin-top: 16px;
                color: #C9C9C9;
                font-size: 12px;

                .icon {
                    margin-right: 10px;
                }

                .home-top-num {
                    display: flex;
                    align-items: center;
                }

                .home-top-view {
                    margin-right: 26px;
                }
            }
        }

        .home-bottom {
            width: 100%;
            background: #fff;
            display: flex;
            align-items: center;
            padding: 0 10px;
            border-top: 1px solid #F2F5F8;

            .home-bottom-avatar {
                width: 20px;
                height: 20px;
                border-radius: 50%;
            }

            .home-bottom-username {
                font-size: 14px;
                line-height: 34px;
                color: #666;
                flex: 1;
                overflow: hidden;
                padding: 0 8px;
            }

            .home-bottom-time {
                font-size: 14px;
                line-height: 34px;
                color: #C9C9C9;
            }
        }
    }
}</style>
